<!--
 * @Author: your name
 * @Date: 2020-09-11 09:57:25
 * @LastEditTime: 2021-10-18 17:24:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/components/GattDate/components/LineAll/index.vue
-->
<template>
  <div class="line-all">
    <template v-for="(item, index) in list">
      <template>
        <div
          class="line"
          :key="item.id + index + 'line-row'"
          :id="'line' + item.id"
          v-show="(item.type === '1' || item.type === '2') && item.isShow"
          :style="{
            left: item.left + 'px',
            top: item.top + 'px',
            width: item.widthMe + 'px'
          }"
          @mousedown="
            lineMousedown(
              `line${item.id}`,
              $event,
              item.id,
              item.parentId,
              index,
              item
            )
          "
          @mouseover="
            lineMouseover(
              `line${item.id}`,
              $event,
              item.id,
              item.parentId,
              index
            )
          "
          @mouseenter="
            lineMouseenter(
              `line${item.id}`,
              $event,
              item.id,
              item.parentId,
              index
            )
          "
          @mouseleave="lineMouseleave"
          >
            <Slider
              :min="0"
              :max="100"
              v-model="item.per"
              :id="item.id"
              :row="item"
              :parentId="item.parentId"
              v-show="item.type === '2'"
              :widths="item.widthChild"
              :fieldsAttr="fieldsAttr"
              @thunkMousedown="thunkMousedown"
              @thunkMouseup="thunkMouseup"
              @thunkMousemove="thunkMousemove"
            ></Slider>
            <div
              class="leftCurDrag dragItem"
              @mousedown.stop="
                leftCurDragMounsedown(
                  `line${item.id}`,
                  $event,
                  item.id,
                  item.parentId,
                  index,
                  item
                )
              "
            ></div>
            <div class="rightCurDrag dragItem"
            @mousedown.stop="
              rightCurDragMounsedown(
                `line${item.id}`,
                $event,
                item.id,
                item.parentId,
                index,
                item
              )
            ">
            </div>
            <!-- 线条入口 后置依赖时 -->
            <template v-if="item.dependPid">
            <!-- 箭头线左边 -->
              <!-- x轴线=>右边箭头线 -->
              <div class="arrow-line-inR"></div>
            </template>
            <!-- 线条入口 有前置依赖时 -->
            <template v-if="item.requireId">
              <div class="arrow-line-inRout">
              </div>
            </template>
            <!-- 依赖线条出口 -->
            <div class="arrow-line-outer" v-if="item.depends && item.depends.length">
              <span></span>
            </div>
            <!-- 前置依赖出口 -->
            <div class="arrow-line-reqOuter" v-if="item.requireChild && item.requireChild.length">
              <template v-for="req in item.requireChild">
                <span :key="req.id" :style="{width: `${req.linkTopWidth}px`}"></span>
              </template>
            </div>
        </div>
        <!-- 该线有出口场景时的连线 -->
        <template v-show="item.isShow && item.depends && item.depends.length">
          <div class="arrow-line-link"
            v-for="inItem in item.depends"
            :key="item.id + '-link-' + inItem.id"
            :id="item.id + '-link-' + inItem.id"
            :style="{width: `${inItem.linkWidth}px`,left: `${inItem.linkLeft}px`,top:`${inItem.linkTop}px`}"
            >
            <span
              :style="{height: `${inItem.linkHeight}px`}"   class="arrow-line-link-y">
            </span>
          </div>
        </template>
        <!-- 该线有出口场景时的连线-前置依赖 -->
        <template v-if="item.isShow && item.requireChild && item.requireChild.length">
          <div class="arrow-line-link linkReqouter"
            v-for="inItem in item.requireChild"
            :key="item.id + '-link-' + inItem.id"
            :id="item.id + '-link-' + inItem.id"
            :style="{width: `${inItem.linkWidth}px`,left: `${inItem.linkLeft}px`,top:`${inItem.linkTop}px`}"
            >
            <span
              :id="item.id + '-link-y-' + inItem.id"
              :style="{height: `${inItem.linkHeight}px`}"   class="arrow-line-link-y">
            </span>
          </div>
        </template>
      </template>
      <!-- 分组 -->
      <template v-if="item.isShow && item.type === '3'">
        <div
          class="group"
          :style="{
            top: item.top + 'px',
            left: item.left + 'px',
            width: item.widthMe + 'px',
            backgroundColor: item.perColor && item.perColor.bgColor ? item.perColor.bgColor : ''
          }"
          :key="item.id + 'group'"
          :id="'line' + item.id"
        >
          <div
            class="progress"
            :style="{
              width: item.per + '%',
              'backgroundColor': item.perColor && item.perColor.processColors ? (item.perColor.processColors)[getPer(Object.keys(item.perColor.processColors))] : ''
             }"
          ></div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import Slider from './Slider.vue'
export default {
  name: 'LineAll',
  components: { Slider },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fieldsAttr: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 是否显示信息
      isShowMsg: false
    }
  },
  methods: {
    // 每一行拖拽
    /**
     * @param  {String} dom ref
     * @param  {Object} events $event
     * @param  {Number} id id
     * @param  {Number} parentId parentId
     * @param  {Number} index index
     */
    lineMousedown (dom, e, id, parentId, index, item) {
      this.$emit('lineMousedown', dom, e, id, parentId, index, item)
    },
    thunkMouseup (per, e, id, parentId) {
      this.$emit('thunkMouseup', per, e, id, parentId)
    },
    // 左侧拖拽增加
    /**
     * @param  {String} dom ref/id
     * @param  {Object} e $event
     * @param  {Number} id id
     * @param  {Number} parentId parentId
     * @param  {Number} index index
     */
    leftCurDragMounsedown (domId, e, id, parentId, index, item) {
      this.$emit('leftCurDragMounsedown', domId, e, id, parentId, index, item)
    },
    rightCurDragMounsedown (domId, e, id, parentId, index, item) {
      this.$emit('rightCurDragMounsedown', domId, e, id, parentId, index, item)
    },
    // 鼠标悬停展示上部日期
    lineMouseover () {
      // this.$emit('lineMouseover')
    },
    lineMouseleave (e) {
      this.$emit('lineMouseleave', e)
    },
    // 鼠标悬停展示上部日期
    lineMouseenter (dom, e, id, parentId, index) {
      this.$emit('lineMouseenter', dom, e, id, parentId, index)
    },
    // 滑动进度条事件
    thunkMousemove () {
      this.isShowMsg = false
    },
    // 滑动进度条事件
    thunkMousedown () {
      this.isShowMsg = false
    },
    getPer (arrData) {
      const arr = Array.from(new Set(arrData))
      const newArray = []
      let j = 0
      for (const i in arr) {
        if (~~arr[i] >= this.per) {
          newArray[j++] = arr[i]
        }
      }
      return Math.min(...newArray)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .line-all{
    width: 100%;
    height: 100%;
    position: relative;
    .group{
      position: absolute;
      background-color: #909090!important;
      border: none!important;
      border-radius: 0!important;
      height: 14px!important;
      line-height: 14px!important;
      clip-path:  polygon(100% 0,100% 100%,calc(100% - 8px) 60%,8px 60%,0 100%,0 0);
      .progress{
        background-color: #606060!important;
        height: 100%;
      }
    }
    .line{
      position: absolute;
      .dragItem{
        cursor: e-resize;
        width: 10px;
        height: 16px;
        background-color: #000;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        border-radius: 3px;
        user-select: none;
        &.leftCurDrag{
          left: -15px;
        }
        &.rightCurDrag{
          right: -15px;
        }
      }
      .arrow-line-inL{
        position: absolute;
        left: -31px;
        bottom: 8px;
        width: 2px;
        height: 8px;
        box-sizing: border-box;
        background-color: #666;
        &-x{
          position: absolute;
          right: 0;
          height: 2px;
          background-color: #666;
          width: 10px;
          display: block;
          &-y{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 42px;
            background-color: #666;
            width: 2px;
            display: block;
          }
        }
      }
      .arrow-line-inR{
        position: absolute;
        left: -29px;
        top: 7px;
        width: 10px;
        height: 1px;
        box-sizing: border-box;
        background-color: #666;
        &:before{
          content: "";
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 8px;
          top: -4px;
          border-width: 4px 0 4px 6px;
          border-style: solid;
          border-color: transparent transparent transparent #666;
        }
        &:after{
          content: "";
          display: block;
          width: 1px;
          height: 8px;
          position: absolute;
          left: 0;
          bottom: 0;
          background-color: #666;
        }
      }
      .arrow-line-inRout{
        position: absolute;
        left: -29px;
        top: 7px;
        width: 10px;
        height: 1px;
        box-sizing: border-box;
        background-color: #666;
        &:before{
          content: "";
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 8px;
          top: -4px;
          border-width: 4px 0 4px 6px;
          border-style: solid;
          border-color: transparent transparent transparent #666;
        }
        &:after{
          content: "";
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          height: 8px;
          width: 1px;
          background-color: #666;
        }
      }
      .arrow-line-outer{
        position: absolute;
        left: -10px;
        top: 16px;
        width: 1px;
        height: 12px;
        box-sizing: border-box;
        background-color: #666;
        span{
          display: block;
          width: 20px;
          height: 1px;
          position: absolute;
          right: 0px;
          bottom: 0px;
          background-color: #666;
        }
      }
      .arrow-line-reqOuter{
        position: absolute;
        right: -11px;
        top: 16px;
        width: 1px;
        height: 10px;
        box-sizing: border-box;
        background-color: #666;
        span{
          display: block;
          position: absolute;
          right: 0;
          top: 10px;
          width: 40px;
          height: 1px;
          background-color: #666;
        }
      }
    }
    .arrow-line-link{
      position: absolute;
      height: 1px;
      background-color: #666;
      &-y{
        position: absolute;
        bottom: 0;
        width: 1px;
        display: block;
        background-color: #666;
      }
    }
  }
</style>
